<template>
  <div class="container">
    <el-card>
      <!-- 头部 -->
      <el-row
        type="flex"
        justify="space-between"
      >
        <el-row
          type="flex"
          style="width:640px;"
          align="center"
        >
          <!-- <span class="name" style="width:140px;">学科名称</span> -->
          <el-col>
            <el-form
              :inline="true"
            >
              <el-form-item
                label="学科名称"
                label-width="80px"
              >
                <el-input
                  v-model="name"
                  style="width:100px;"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="状态名称"
                label-width="80px"
              >
                <el-select
                  v-model="stateName"
                  style="width:100px;"
                >
                  <el-option
                    v-for="item,i in stateOption"
                    :key="i"
                    :label="item.label"
                    :value="item.value"
                  >
                    {{ item.label }}
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button
                  style="margin-left:10px;"
                  @click="clear"
                >
                  清除
                </el-button>
                <el-form-item>
                  <el-button
                    type="primary"
                    style="margin-left:10px;"
                    @click="searchName"
                  >
                    搜索
                  </el-button>
                </el-form-item>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-button
              class="el-icon-plus"
              type="success"
              @click="showDialog=true"
            >
              新增学科
            </el-button>
          </el-col>
        </el-row>
      </el-row>
      <!-- 提示按钮 -->
      <el-alert
        :title="`数据一共${total}条`"
        type="info"
        show-icon
      >
      </el-alert>
      <!-- table表格 -->
      <el-table
        :data="list"
      >
        <el-table-column
          type="index"
          label="序号"
        ></el-table-column>
        <el-table-column
          prop="subjectName"
          label="所属学科"
        ></el-table-column>
        <el-table-column
          prop="directoryName"
          label="目录名称"
        ></el-table-column>
        <el-table-column
          prop="username"
          label="创建者"
        >
          <!-- <template>
            {{ new Date() | formatTime }}
          </template> -->
        </el-table-column>
        <el-table-column
          :formatter="formatTime"
          prop="addDate"
          width="120px"
          label="创建日期"
        ></el-table-column>
        <el-table-column
          prop="totals"
          label="面试题数量"
        ></el-table-column>
        <el-table-column
          :formatter="formatter"
          prop="state"
          label="状态"
        ></el-table-column>

        <el-table-column
          label="操作"
          width="240px"
        >
          <template v-slot="{row}">
            <el-button
              type="text"
              size="small"
              @click="stop(row)"
            >
              {{ row.state ===1?'禁用' :'启用' }}
            </el-button>
            <el-button
              :disabled="row.state!==1"
              type="text"
              size="small"
              @click="edit(row)"
            >
              修改
            </el-button>
            <el-button
              :disabled="row.state!==1"
              type="text"
              size="small"
              @click="deleteOne(row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row
        type="flex"
        justify="center"
      >
        <el-pagination
          layout="total, prev ,pager ,next , sizes ,jumper"
          :page-size="listData.pagesize"
          :total="total"
          :current-page="listData.page"
          @current-change="chanegPage"
          @size-change="handleSizeChange"
          :page-sizes="[5,10,20]"
        >
        </el-pagination>
      </el-row>
      <!-- 弹层 -->
      <el-dialog
        :visible="showDialog"
        title="新增学科"
        width="500px"
        @close="btnCancel"
      >
        <el-form
          ref="formData"
          :model="formData"
          :rules="rules"
        >
          <el-form-item
            label="所属学科"
            label-width="120px"
            prop="subjectID"
          >
            <el-select
              style="width:200px;"
              v-model="formData.subjectID"
              @focus="getOption"
            >
              <el-option
                v-for="item,i in option"
                :key="i"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="目录名称"
            label-width="120px"
            prop="directoryName"
          >
            <el-input
              style="width:200px;"
              v-model="formData.directoryName"
            ></el-input>
          </el-form-item>
        </el-form>
        <template v-slot:footer>
          <el-row
            type="flex"
            justify="center"
          >
            <el-col>
              <el-button
                size="small"
                @click="btnCancel"
              >
                取消
              </el-button>
              <el-button
                size="small"
                type="primary"
                @click="btnOk"
              >
                确认
              </el-button>
            </el-col>
          </el-row>
        </template>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { list, remove, add, update, detail, simple, changeState } from '@/api/hmmm/directorys'
import { formatTime } from '@/utils'

export default {
  data () {
    return {
      option: [],
      stateOption: [{
        label: '已禁用',
        value: 0
      }, {
        label: '已启用',
        value: 1
      }],
      stateName: '',
      state: '',
      name: '',
      showDialog: false,
      formData: {
        subjectID: '',
        directoryName: ''
      },
      rules: {
        subjectID: [{
          trigger: 'blur', required: true, message: '学科名不能为空'
        }],
        directoryName: [{
          trigger: 'blur', required: true, message: '学科名不能为空'
        }]
      },
      list: [],
      total: 0,
      listData: {
        page: 1,
        pagesize: 10
      }
    }
  },
  created () {
    this.getList()
  },
  methods: {
    async getList () {
      const res = await list({ ...this.listData })
      this.list = res.data.items
      this.total = res.data.counts
    },
    // 格式化
    formatter (e) {
      return e.state ? '已启用' : '已禁用'
    },
    // 切换页数
    chanegPage (newPage) {
      this.listData.page = newPage
      this.getList()
    },
    // 删除
    deleteOne (row) {
      this.$confirm('您确定要删除吗？').then(async () => {
        await remove(row)
        this.$message.success('删除成功')
        this.getList()
      })
    },
    // 确认按钮
    btnOk () {
      this.$refs.formData.validate(async isOk => {
        if (isOk) {
          if (!this.formData.id) {
            await add(this.formData)
          } else {
            await update(this.formData)
          }
          this.$message.success('操作成功')
          this.getList()
          this.showDialog = false
        }
      })
    },
    // 编辑
    async edit (row) {
      const { data } = await detail(row)
      this.formData = data
      this.showDialog = true
    },
    // 取消按钮
    btnCancel () {
      this.formData = {
        subjectName: '',
        isFrontDisplay: 0
      }
      this.showDialog = false
      this.$refs.formData.resetFields()
    },
    // 搜索学科
    async searchName () {
      if (this.name.trim() === '' || this.stateName === '') {
        this.$message.error('搜索不能为空')
        this.name = ''
        this.state = ''
        return
      }
      const res = await list({ page: 1, pagesize: this.total })
      const newList = res.data.items
      const result = newList.filter(item => item.subjectName.includes(this.name) && item.state === this.stateName)
      this.total = result.length
      this.list = result
    },
    // 清除
    clear () {
      this.name = ''
      this.stateName = ''
      this.getList()
    },
    async getOption () {
      const { data } = await simple()
      this.option = data
    },
    // 禁用
    async stop (row) {
      await changeState({ id: row.id, state: row.state === 0 ? 1 : 0 })
      this.$message.success('操作成功')
      this.getList()
    },
    formatTime (row, column) {
      const data = row[column.property]
      const dtime = new Date(data)
      const year = dtime.getFullYear()
      let month = dtime.getMonth() + 1
      if (month < 10) {
        month = '0' + month
      }
      let day = dtime.getDate()
      if (day < 10) {
        day = '0' + day
      }
      let hour = dtime.getHours()
      if (hour < 10) {
        hour = '0' + hour
      }
      let minute = dtime.getMinutes()
      if (minute < 10) {
        minute = '0' + minute
      }
      let second = dtime.getSeconds()
      if (second < 10) {
        second = '0' + second
      }
      return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
    },
    handleSizeChange (val) {
      this.listData.pagesize = val
      this.getList()
    }

  }
}
</script>
